

import '@wangeditor/editor/dist/css/style.css'
import React, { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import '../../styles/chen/systemagreement.scss'
interface Props{

}

  
function SystemAgreement(props: Props) {
    // editor 实例
    const [editor, setEditor] = useState<IDomEditor | null>(null)
    // 编辑器内容
    const [html, setHtml] = useState('<p>hello</p>')
    useEffect(() => {
        setTimeout(() => {
            setHtml('<p>请输入</p>')
        }, 1500)
    }, [])
    const toolbarConfig: Partial<IToolbarConfig> = {}
    // 编辑器配置
    const editorConfig: Partial<IEditorConfig> = {
        placeholder: '请输入内容...',
    }
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    const [current, setCurrent] = useState('1');

    const onClick: MenuProps['onClick'] = (e) => {
      console.log('click ', e);
      setCurrent(e.key);
    };
    const items: MenuProps['items'] = [
        {
            label: '用户端隐私政策',
            key: '1',
          
        },
        {
            label: '医生端隐私政策',
            key: '2',
          
        },
        {
            label: '签约协议',
            key: '3',
          
        },
    ]
    return (
        <div className='system-agreement'>
            <h4> 协议管理</h4>
            <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
            <div className='text-box'>
                <p>内容</p>
            <div style={{ border: '1px solid #ccc', zIndex: 100}}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editor => setHtml(editor.getHtml())}
                    mode="default"
                    style={{ height: '500px', overflowY: 'hidden' }}
                />
            </div>
          
        </div>


            
        </div>
    );
}

export default SystemAgreement;